<template>
  <div id="app">
    <div class="container">
      <div class="loading" v-show="$store.state.isShowLoading">
        <cube-loading :size="40" ></cube-loading>
        <span class="loading-text">珠峰君努力加载中</span>
      </div>
      <router-view></router-view>
    </div>
    <cube-tab-bar
      :value="$router.currentRoute.path"
      :data="tabs"
      @click="clickHandler"
      @change="changeHandler"
    ></cube-tab-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedLabelDefault: "/",
      tabs: [
        {
          label: "首页",
          value: "/",
          icon: "iconfont icon-xingqiu"
        },
        {
          label: "我的课程",
          value: "/course",
          icon: "iconfont icon-react"
        },
        {
          label: "个人中心",
          value: "/profile",
          icon: "iconfont icon-xiaolian"
        }
      ]
    };
  },
  methods: {
    clickHandler(label) {
      this.$router.replace(label);
    },
    changeHandler(label) {
      // if you clicked different tab, this methods can be emitted
    }
  }
};
</script>
<style lang="less">
img {
  max-width: 100%;
}
html,
body {
  height: 100%;
}
#app {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.iconfont {
  font-size: 19px;
}

.container {
  flex: 1;
  overflow: scroll;
}
.cube-tab-bar {
  border-top: 1px solid #ebebeb;
  div {
    font-size: 12px;
    line-height: 16px;
  }
}

.wraper-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #fff;
}
.loading {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.loading-text {
  padding: 20px 0; 
}
</style>
